<template>
	<view class="container">
		<view class="personal-bar row">
			<open-data type="userAvatarUrl" class="avatar" v-if="useInfo == null"></open-data>
			<image :src="useInfo.wxImgLogo" mode="aspectFill" class="avatar" v-else></image>
			<view class="nick column" >
				<open-data type="userNickName" class="name" v-if="useInfo == null"></open-data>
				<text class="name" v-else>{{useInfo.wxNickname}}</text>
				<text class="company" v-if="useInfo.company != ''">{{useInfo.company}}</text>
			</view>
		</view>
		<view class="item row" @click="toMyOrder()">
			<view class="left row">
				<view class="icon center">
					<image src="../../static/img/dd.png" mode="" class="icon1"></image>
				</view>
				<text>我的订单 </text>
			</view>
			<image src="../../static/img/more2.png" mode="" class="right"></image>
		</view>
		<view class="item row" @click="toMyAddress()">
			<view class="left row">
				<view class="icon center">
					<image src="../../static/img/dz.png" mode="" class="icon2"></image>
				</view>
				<text>我的地址 </text>
			</view>
			<image src="../../static/img/more2.png" mode="" class="right"></image>
		</view>
		<view class="item row" @click="toPersonalData()">
			<view class="left row">
				<view class="icon center">
					<image src="../../static/img/zl.png" mode="" class="icon3"></image>
				</view>
				<text>个人资料</text>
			</view>
			<image src="../../static/img/more2.png" mode="" class="right"></image>
		</view>
		<view class="item row" @click="toBindUnit()">
			<view class="left row">
				<view class="icon center">
					<image src="../../static/img/bd.png" mode="" class="icon4"></image>
				</view>
				<text> 绑定企业</text>
			</view>
			<image src="../../static/img/more2.png" mode="" class="right"></image>
		</view>
		<view class="item row" @tap="toAboutUs">
			<view class="left row">
				<view class="icon center">
					<image src="../../static/img/wm.png" mode="" class="icon5"></image>
				</view>
				<text>关于我们</text>
			</view>
			<image src="../../static/img/more2.png" mode="" class="right"></image>
		</view>
		<view class="item row" @click="call(tel)">
			<view class="left row">
				<view class="icon center">
					<image src="../../static/img/hf.png" mode="" class="icon6"></image>
				</view>
				<text>联系客服</text>
			</view>
			<image src="../../static/img/more2.png" mode="" class="right"></image>
		</view>
		<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" v-if="show2" class="login-mask2"></button>
	</view>
</template>

<script>
	import comm from '../../static/data/commFunc.js'
	import cfg from '../../static/data/config.js'
	var r = cfg.router;
	export default {
		data() {
			return {
				useInfo: null,
				avatarUrl: "",
				tel: "13800138000",
				show2: false
			};
		},
		onShow() {
			comm.request("POST", "/public/customerMobile", {}, (res, data) => {
				console.log("客服电话", res)
				if (res.data.ret_code == 200) {
					this.tel = data.mobile
				} 
			})
			if (comm.getCache("token")) {
				this.getData()
			}
		},
		methods: {
			getData() {
				let data = {}
				comm.request("POST", "/app/member/getInfo", data, (res, data) => {
					console.log("个人信息", res)
					if (res.data.ret_code == 200) {
						this.useInfo = data
					}
				})
			},
			toMyOrder(e) {
				if (!comm.getCache("isLogin")) {
					comm.navigateTo(r.login)
					return
				}
				comm.navigateTo(r.myOrder)
			},
			toMyAddress(e) {
				if (!comm.getCache("isLogin")) {
					comm.navigateTo(r.login)
					return
				}
				comm.navigateTo(r.myAddress)
			},
			toPersonalData() {
				if (!comm.getCache("isLogin")) {
					comm.navigateTo(r.login)
					return
				}
				comm.navigateTo(r.personalData)
			},
			toBindUnit() {
				if (!comm.getCache("isLogin")) {
					comm.navigateTo(r.login)
					return
				}

				comm.navigateTo(r.bindUnit)
			},
			toAboutUs() {
				comm.navigateTo(r.aboutUs)
				var baseUrl = comm.baseUrl
				// let url = encodeURIComponent(baseUrl+'/public/agreement?type=1')
				let url = encodeURIComponent('https://www.baidu.com')
				// uni.navigateTo({
				//     url: '../aboutUs/about?url='+url
				// });
			},
			call(tel) {
				uni.makePhoneCall({
					// 手机号
					phoneNumber: tel,

					// 成功回调
					success: (res) => {
						console.log('调用成功!')
					},
					// 失败回调
					fail: (res) => {
						console.log('调用失败!')
					}
				});
			},
			getphonenumber(e){
				var encryptedData = encodeURIComponent(e.detail.encryptedData);
				var iv = e.detail.iv;
				let data = {
					encryptedData: encryptedData,
					iv: iv,
					nickName: comm.getCache("nickName"),
					headImgUrl: comm.getCache("avatarUrl")
				};
				comm.request("POST", "/app/member/getUser", data, (res, data) => {
					console.log("保存用户手机信息", res)
					if (res.data.ret_code == 200) {
							this.show2 = false
					} else {
						comm.showToast(res.data.ret_msg, "none")
					}
				})
			},
		}
	}
</script>

<style lang="less">
	.container {
		padding: 30rpx 50rpx;
	}

	.personal-bar {
		border-bottom: 1rpx solid #F6F6F6;
		padding-bottom: 48rpx;

		.avatar {
			width: 116rpx;
			height: 116rpx;
			border-radius: 50%;
			overflow: hidden;
			margin-right: 30rpx;
		}

		.nick {
			align-items: flex-start;

			.name {
				font-size: 36rpx;
				font-weight: bold;
				color: rgba(51, 51, 51, 1);
				margin-bottom: 10rpx;
			}

			.company {
				font-size: 24rpx;
				color: rgba(153, 153, 153, 1);
			}
		}
	}

	.item {
		justify-content: space-between;
		padding: 40rpx 0;
		border-bottom: 1rpx solid #F6F6F6;

		.left {
			.icon {
				width: 40rpx;
				height: 40rpx;
				margin-right: 30rpx;

				.icon1 {
					width: 30rpx;
					height: 32rpx;
				}

				.icon2 {
					width: 34rpx;
					height: 33rpx;
				}

				.icon3 {
					width: 32rpx;
					height: 36rpx;
				}

				.icon4 {
					width: 32rpx;
					height: 32rpx;
				}

				.icon5 {
					width: 28rpx;
					height: 32rpx;
				}

				.icon6 {
					width: 33rpx;
					height: 30rpx;
				}
			}

			text {
				font-size: 28rpx;
				color: rgba(25, 17, 11, 1);
			}
		}

		.right {
			width: 11rpx;
			height: 20rpx;

		}
	}

	/*微信授权*/
	.login-mask {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: 9;
	}
	.login-mask2 {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, 0);
		z-index: 999999999;
	}
	.loginModel {
		width: 618rpx;
		height: 348rpx;
		background-color: #fff;
		margin: 0 auto;
		border-radius: 14rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		color: #282828;
		font-size: 32rpx;
		padding-top: 80rpx;
	}

	.justy {
		margin-top: 60rpx;
		align-items: center;
		justify-content: space-around;
	}

	.loginBtn {
		width: 200rpx;
		// height: 92rpx;
		padding: 10rpx 20rpx;
		border-radius: 30rpx;
		background: #D93011;
		border: 1px solid #D93011;
		font-size: 30rpx;
		color: #fff;
		position: relative;

		image {
			width: 46rpx;
			height: 38rpx;
			margin-right: 20rpx;
		}

		button {
			position: absolute;
			top: 0;
			left: 0;
			width: 200rpx;
			height: 60rpx;
			padding: 0;
			margin: 0;
			opacity: 0;
		}
	}

	.nologinBtn {
		width: 200rpx;
		border: 1px solid #D93011;
		padding: 10rpx 20rpx;
		border-radius: 30rpx;
		text-align: center;
		font-size: 30rpx;
	}
</style>
